<template>
  <hgroup class="common_header">
    <div class="left">
        <slot  name="left"> &lt; </slot>
    </div>
    <h1>
      <slot> </slot>
    </h1>
   <div class="right">
    <slot  name="right"> </slot>
   </div>
  </hgroup>
</template>

<script>
import { reactive, toRefs } from "vue";
export default {
  name: "common_header",
  setup(props) {
    const state = reactive({});
    return {
      ...toRefs(state),
    };
  },
};
</script>

<style lang='scss' scoped>
.common_header {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  font-size: 24px;
  margin: 0;
  height: 45px;
  line-height: 45px;
  text-align: center;
  background-color: #f5f5f5;
  color: $color-high-text;
  z-index: 999;
  display: flex;
  align-items: center;
  .left,.right{
      width: 60px;
      text-align: center;
      font-size: 14px;
  }
  h1{
      flex: 1;
      text-align: center;
      font-size: 24px;
  }
}
</style>
